<template>
  <div class="mytop">
    <div class="topbox">
        <h5>我的易购</h5>
        <van-icon name="setting-o" @click="$router.push('/UserSet')" />
    </div>
    <div class="imgbox">
        <div class="toubox">
            <img src="https://image.suning.cn/uimg/cmf/cust_headpic/0000000000_01_240x240.jpg" alt="">
            <span>去实名认证</span>
        </div>
        <div class="phonbox">
            <div class="phon">199******57</div>
            <span>升级权益&gt;</span>
        </div>
        <div class="mabox">
            <img src='https://res.suning.cn/project/msinode/wap/home/image/qr-icon.png' alt="">
        </div>
    </div>
    <div class="gn">
        <div class="num" v-for="(item, index) in gn" :key="index" @click="change(index)">
            <div class="numtop">{{ item.num }}</div>
            <div class="numbottom">{{ item.text }}</div>
        </div>
    </div>
    <div class="bank">
        <img src="https://oss.suning.com/vss/activity/wximg/my/vip.png" alt="">
        <div>银行联名卡,办卡得Super</div>
        <div class="look">
            <span>立即查看</span>
            <van-icon name="arrow" />
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            gn: [
                { num: 0, text: '优惠卷' },
                { num: 0, text: '领云钻' },
                { num: 0, text: '足迹' },
                { num: this.$store.state.focusData.length, text: '我的关注'},
            ]
        }
    },
    methods: {
        change(i) {
            switch (i) {
                case 0:
                    this.$router.push('/s');
                    break;
                case 1:
                    this.$router.push('/s');
                    break;
                case 2:
                    this.$router.push('/s');
                    break;
                case 3:
                    this.$router.push('/StoreAttention');
                    break;
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.mytop{
    width: 3.75rem;
    height: 2.08rem;
    overflow: hidden;
    background-color:#ffdb47 ;
    .topbox{
        display: flex;
        margin-top: 0.12rem;
        margin-bottom: 0.27rem;
        font-size: 0.18rem;
        h5{
            margin-left: 1.5rem; 
            margin-right: 1.17rem;
        }
    }
    .imgbox{
        font-size: 0.12rem;
        display: flex;
        .toubox{
            margin-left: 0.19rem;
            position: relative;
            img{
                width: 0.6rem;
                height: 0.6rem;
            }
            span{
                width: 0.71rem;
                display: block;
                position: absolute;
                top: 0.5rem;
                left: 0rem;
                border-radius: 0.09rem;
                background-color: #fff5a8;
                text-align: center;
            }
        }
        .phonbox{
            margin-left: 0.17rem;
            margin-right: 1.25rem;
            .phon{
                margin-top: 0.14rem;
                margin-bottom: 0.11rem;
                font-weight: 800;
            }
            span{
                width: 0.71rem;
                display: block;
                color: #fdfbf2;
                text-align: center;
                border-radius: 0.09rem;
                background-color: rgba($color: #000000, $alpha: .2);
                line-height: 0.16rem;
            }
        }
        .mabox{
           img{
                width: 0.6rem;
                height: 0.6rem;
           }
        }
    }
    .gn {
        width: 100%;
        display: flex;
        justify-content: space-around;
        margin-top: 0.27rem;
        text-align: center;
        .num{
            .numtop{
                font-size: 0.13rem;
                font-weight: 800;
            }
            .numbottom{
                font-size: 0.15rem;
            }
        }
    }
    .bank{
        display: flex;
        position: absolute;
        top: 1.9rem;
        font-size: 0.12rem;
        left: 0.13rem;
        padding: 0.07rem;
        background-color: #ffffff;
        border-radius: 0.06rem;
        align-items: center;
        img{
            width: 0.45rem;
            height: 0.3rem;
            margin-right: 0.06rem;
        }
        .look{
            margin-left: 0.71rem;
            span{
                margin-right: 0.09rem;
            }
            .van-icon-arrow{
                margin-right: 0.13rem;
            }
        }
    }
}
</style>